<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>治疗单</title>
    <style>
      @media print {
        html,body {
          margin: 0;
          padding: 3mm;
          font-size: 0.5mm;
        }

        @page {
          size: A5 landscape;
          margin: 0;
        }

        #app {
          width: 100%;
          height: 100%;
        }

        .header-box {
          display: flex;
          align-items: center;
        }

        .header-box > div:nth-child(1) {
          flex-shrink: 0;
          width: 40mm;
        }

        .header-box > div:nth-child(2) {
          flex-grow: 1;
          text-align: center; 
          line-height: 1;
        }

        .header-box > div:nth-child(3) {
          flex-shrink: 0;
          width: 40mm;
        }

        .user-box {
          border: none;
          border-top: 0.2mm solid black;
          border-bottom: 0.2mm solid black;
          margin-top: 5mm;
          width: 100%;
          table-layout: fixed;
        }

        .cbzd-box {
          padding: 0.5mm;
        }

        .nr-box {
          height: 85mm;
          margin-bottom: 2mm;
          overflow: hidden;
          border-top: 0.5mm solid black;
          border-bottom: 0.5mm solid black;
        }
      }
    </style>
  </head>

  <body>
    <section id="app" v-if="info">
      <section v-for="(item,index) in list" :key="index">
        <div class="header-box">
          <div>
            <img
              :src="info.hospital.logo"
              alt=""
              style="display: block; width:40mm;height:9mm;"
            />
          </div>
          <div>
            <div style="font-size:4mm;">{{info.hospital.name}}</div>
            <div style="margin-top:1mm;">治疗单</div>
          </div>
          <div></div>
        </div>
        <table class="user-box">
          <tr>
            <td>姓名：{{ info.patientInfo.name }}</td>
            <td>性别：{{info.patientInfo.sex ==1?'男':(info.patientInfo.sex ==2?'女':'不详')}}</td>
            <td>
              年龄：
              <span v-if="info.patientInfo.age>18"
                >{{info.patientInfo.age}}岁</span
              >
              <span v-else>{{info.patientInfo.birthday|toAge}}</span>
            </td>
          </tr>
          <tr>
            <td>档案号：{{ info.patientInfo.archivesCode }}</td>
            <td>科室：{{ info.professionalDeptName }}</td>
          </tr>
        </table>

        <div class="cbzd-box">初步诊断：{{ info.firstVisit }}</div>
        <div class="nr-box">
          <table style="width:100%;border:none;border-collapse: collapse">
            <tr style="border-bottom:0.2mm solid black; ">
              <td>项目名称</td>
              <td>单价</td>
              <td>总次数</td>
              <td>已治疗次数</td>
              <td>总金额</td>
              <td>说明</td>
            </tr>
            <tr v-for="(item2,index2) in item.list" :key="index2">
              <td>{{ item2.name }}</td>
              <td>￥{{ item2.price }}</td>
              <td>{{ item2.adviceNum }}</td>
              <td>{{ item2.cureCount }}</td>
              <td>￥{{ item2.sellMoney }}</td>
              <td>{{ item2.remark }}</td>
            </tr>
          </table>
        </div>
        <table
          style="width:100%;border:none;text-align: center;table-layout: fixed;"
        >
          <tr>
            <td style="text-align: left;">金额：￥{{ item.sellMoney }}</td>
            <td>开单医生：{{ info.doctorName }}</td>
            <td>开单日期：{{ toTime(info.time) }}</td>
          </tr>
        </table>
      </section>
    </section>
    <script src="https://lib.baomitu.com/vue/2.6.10/vue.min.js"></script>
    <script>
      new Vue({
        el: "#app",
        data: {
          info: null,
          pageSize: 12,
          list: []
        },
        mounted() {
          var th = this;
          window.addEventListener("message", function(e) {
            var json = e.data;
            // delete json.list;
            var arr = [];
            var list = [];
            var sellMoney = 0;
            //如果是pageSize的倍数就第二页
            for (var index = 0; index < json.list.length; index++) {
              var element = json.list[index];
              sellMoney += element.sellMoney;
              arr.push(element);
              var i = index + 1;
              if (i % th.pageSize == 0) {
                list.push({
                  sellMoney: sellMoney,
                  list: arr
                });
                arr = [];
                sellMoney = 0;
              }
            }
            if (arr.length > 0) {
              list.push({ sellMoney: sellMoney, list: arr });
            }
            th.list = [...list];
            delete json.list;
            th.info = json;
            th.$nextTick(function() {
              th.isLoadImg();
            });
          });
        },
        filters: {
          toAge(birthday) {
            if (!birthday) return "";
            var now = new Date();
            var year = now.getFullYear();
            var month = now.getMonth() + 1;
            var day = now.getDate();
            var hour = now.getHours();
            var minute = now.getMinutes();
            var second = now.getSeconds();
            var myDate = new Date(birthday);
            var myYear = myDate.getFullYear();
            var myMonth = myDate.getMonth() + 1;
            var myDay = myDate.getDate();
            var myHour = myDate.getHours();
            var myMinute = myDate.getMinutes();
            var mySecond = myDate.getSeconds();
            var isLeapYear = function isLeapYear(year) {
              return (year % 4 == 0 && year % 100 != 0) || year % 400 == 0;
            };
            var getDaysOfMonth = function getDaysOfMonth(dateStr) {
              var date = new Date(dateStr);
              var year = date.getFullYear();
              var mouth = date.getMonth() + 1;
              var day = 0;

              if (mouth == 2) {
                day = isLeapYear(year) ? 29 : 28;
              } else if (
                mouth == 1 ||
                mouth == 3 ||
                mouth == 5 ||
                mouth == 7 ||
                mouth == 8 ||
                mouth == 10 ||
                mouth == 12
              ) {
                day = 31;
              } else {
                day = 30;
              }
              return day;
            };
            var gapSecond = second - mySecond;
            if (gapSecond < 0) {
              minute -= 1;
              gapSecond = 60 - mySecond + second;
            }
            var gapMinute = minute - myMinute;
            if (gapMinute < 0) {
              hour -= 1;
              gapMinute = 60 - myMinute + minute;
            }
            var gapHour = hour - myHour;
            if (gapHour < 0) {
              day -= 1;
              gapHour = 24 - myHour + hour;
            }
            var gapDay = day - myDay;
            if (gapDay < 0) {
              month -= 1;
              gapDay = getDaysOfMonth(birthday) - myDay + day;
            }
            var gapMonth = month - myMonth;
            if (gapMonth < 0) {
              year -= 1;
              gapMonth = 12 - myMonth + month;
            }
            var gapYear = year - myYear;
            if (gapYear < 0) {
              gapYear = 0;
            }
            var dateStr = `${gapYear}岁${gapMonth}月${gapDay}天`;
            // (gapHour<10? ("0"+gapHour): gapHour)+"时 " +
            // (gapMinute<10? ("0"+gapMinute): gapMinute)+"分 " +
            // (gapSecond<10? ("0"+gapSecond): gapSecond)+"秒";

            return dateStr;
          }
        },
        methods: {
          isLoadImg() {
            //这里要判断图片是否加载完成
            var imgs = document.getElementsByTagName("img");
            var timer = setInterval(() => {
              var i = 0;
              for (var index = 0; index < imgs.length; index++) {
                var element = imgs[index];
                if (element.complete) {
                  i++;
                }
              }
              if (i == imgs.length) {
                clearInterval(timer);
                window.print();
              }
            }, 500);
          },
          toTime(time) {
            if (typeof time == "string") time = new Date(time);
            var fn = v => {
              if (v < 10) v = "0" + v;
              return v;
            };
            return (
              time.getFullYear() +
              "/" +
              fn(time.getMonth() + 1) +
              "/" +
              fn(time.getDate()) +
              " " +
              fn(time.getHours()) +
              ":" +
              fn(time.getMinutes()) +
              ":" +
              fn(time.getSeconds())
            );
          }
        }
      });
    </script>
  </body>
</html>
